<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
        .el-range-editor.el-input__inner{
            background: transparent;
        }
        .el-date-editor .el-range-input{
            background: transparent;
            color: white;
        }
        .el-date-editor .el-range-separator{
            color: white;
        }
        .el-input__inner{
            background: transparent;
        }
        .el-form-item__label{
            color: white;
        }
        .el-table .warning-row {
            background:#080d20;
            color: #1874dd;
            font-size: 16px;
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
            background:#18456c;
        }
        .el-table .success-row {
            background:#080d20;
            color: #1874dd;
            font-size: 16px;
        }
        .el-table .dark-blue{
            background:#080d20;
            color: #1874dd;
            font-size: 18px;
            font-weight: 900;
        }
        .el-table__body{
            height: 100%;
        }
        .el-table td, .el-table th.is-leaf{
            border-bottom: 0;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="5" :offset="1" style="background: #F56C6C;border-radius: 8px;color:white">
                <p align="center">高风险</p>
                <p align="center" style="background: #d73530;    margin: 4% 40%; border-radius: 10px;line-height: 40px;">5</p>
            </el-col>
            <el-col :span="5" :offset="1" style="background: #E6A23C;border-radius: 8px;color:white">
                <p align="center">较大风险</p>
                <p align="center" style="background: #9D4F00;    margin: 4% 40%; border-radius: 10px;line-height: 40px;">7</p>
            </el-col>
            <el-col :span="5" :offset="1" style="background: #fbbd08;border-radius: 8px;color:white">
                <p align="center">一般风险</p>
                <p align="center" style="background: #f37b1d;    margin: 4% 40%; border-radius: 10px;line-height: 40px;">19</p>
            </el-col>
            <el-col :span="5" :offset="1" style="background: #0081ff;border-radius: 8px;color:white">
                <p align="center">低风险</p>
                <p align="center" style="background: #6739b6;    margin: 4% 40%; border-radius: 10px;line-height: 40px;">40</p>
            </el-col>
        </el-row>
        <el-form :inline="true" label-width="155px" style="margin-top: 15px">
            <el-form-item label="企业名称">
                <el-input placeholder="企业名称"  style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="风险等级">
                <el-select style="width: 150px;" >
                    <el-option label="Ⅰ级"></el-option>
                    <el-option label="Ⅱ级"></el-option>
                    <el-option label="Ⅲ级"></el-option>
                    <el-option label="Ⅳ级"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-table
                    :data="tableData"
                    height="400"
                    :row-class-name="tableRowClassName"
                    :header-cell-class-name="tableHeaderClass"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="100"
                        >
                </el-table-column>
                <el-table-column
                        prop="projectName"
                        label="企业名称"
                        align="center"
                        >
                    <template slot-scope="scope">
                              <el-tag type="success" effect="dark">{{scope.row.projectName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="风险等级"
                        align="center"
                       >
                    <template slot-scope="scope">
                        <template v-if="scope.$index %2 == 0">
                            <el-tag>Ⅳ级</el-tag>
                        </template>
                        <template v-if="scope.$index %2 != 0">
                            <el-tag type="warning">二级</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="市"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="zone"
                        label="区"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="查看报告"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="success" @click="viewReport(scope.row.projectNo)">查看报告</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="float: right"
                    background
                    layout="prev, pager, next"
                    :pagesize="param.pagesize" :total="totalCount"
                    :current-page.sync="param.pageno" @current-change="onChangePage">
            </el-pagination>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            date:'',
            param:{
                page:1,
                pagesize:10,
                projectName:'',
            },
            totalCount:10,
            tableData: [],
        },
        created: function () {
            $('.page').show();
            this.loadData();
        },
        methods: {
            loadData: function () {
                HttpUtil.get('Project/List',this.param).success((r)=>{
                    if (r.state == 0){
                        this.totalCount = r.total;
                        this.tableData = r.data;
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %2 == 0) {
                    return 'warning-row';
                } else  {
                    return 'success-row';
                }
                return '';
            },
            tableHeaderClass(){
                return 'dark-blue';
            },
            viewReport(projectNo){
               window.parent.vuePage.sel_pro.projectNo = projectNo;
                window.parent.vuePage.showProDetail();
            },
            onChangePage(page) {
                this.param.page = page;
                this.loadData();
            },
        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
